<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form>
      <!-- <textarea-normal label="json数据" v-model="commonAttr.jsonData" @change="onChangeAttr"></textarea-normal> -->
      <!-- <input-normal v-if="commonAttr.title" label="标题" v-model="commonAttr.title" @change="onChangeAttr"></input-normal> -->
      <color-normal  v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字体大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <submit-button :btnComponentData="componentData.btn" comAttr="btn"></submit-button>
      <!-- <switch-normal v-model="commonAttr.isRelate" label="添加新项是否有关联选项" @change="onChangeAttr"></switch-normal> -->
      <switch-normal v-model="commonAttr.isDisplayRelate" label="显示关联选项" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-model="newType" :valLists="FORM_TYPES" label="表单类型" :bIsBtn="false"></dropdown-normal>
      <el-button type="primary"  @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10">
        <el-icon><i class="jy-icon-plus"></i></el-icon>增加内容
      </el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            问答项{{index+1}}
            <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <!-- <div v-if="isDisplayRelateItem(item)"> -->
            <input-normal label="id" v-model="item.id" @change="onUpdateItem(index)"></input-normal>
            <input-normal v-if="isHasOwnProperty(item, 'relateId')" label="关联id" v-model="item.relateId" @change="onUpdateItem(index)"></input-normal>
            <input-normal v-if="item.relateId" label="关联选项索引" v-model="item.optionIndex" @change="onUpdateItem(index)"></input-normal>
            <textarea-normal label="名字（标题）" placeholder="请在此处输入内容" v-model="item.name" @change="onUpdateItem(index)"></textarea-normal>
            <textarea-normal v-if="!item.options" label="输入框提示" placeholder="请在此处输入提示内容" v-model="item.placeholder" @change="onUpdateItem(index)"></textarea-normal>
            <switch-normal v-model="item.isNeed" label="必选" @change="onUpdateItem(index)"></switch-normal>
            <input-normal v-if="isHasOwnProperty(item, 'length')" label="字数限制" v-model="item.length" @change="onUpdateItem(index)"></input-normal>
            <input-normal v-if="isHasOwnProperty(item, 'row')" label="行数限制" v-model="item.row" @change="onUpdateItem(index)"></input-normal>
            
            <!-- options -->
            <el-button v-if="item.options" type="primary" @click.stop="onAddOptionItem(item, index)" class="margin-bottom-10 margin-left-right-16 padding-6">
              <el-icon><i class="jy-icon-plus"></i></el-icon>增加选项
            </el-button>
            <el-collapse v-model="activeNames_" class="margin-left-right-16">
              <el-collapse-item v-for="(option, qIndex) in item.options"  :name="qIndex+1" :key="qIndex">
                <template #title>
                  选项{{qIndex+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteOptionItem($event, index, qIndex)"></i>
                </template>
                <input-normal :label="'选项' + qIndex" placeholder="选项内容" v-model="item.options[qIndex]" @change="onUpdateOptionItem(index)"></input-normal>
              </el-collapse-item>
            </el-collapse>
            
            <input-normal label="导出表名" v-model="item.tableKey" @change="onUpdateItem(index)"></input-normal>
          <!-- </div> -->
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SubmitButton from '@/views/components/submit-button.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'

import { mapState, mapActions } from 'vuex'
import { editUtils } from '@/views/js/edit-utils'
import { FORM_TYPES, ADD_FORM_LISTS } from '@/common/const-form';

export default {
  name: "RightForm",
  mixins: [editUtils],
  setup () {
    return {
      activeNames_: [1],
      FORM_TYPES: FORM_TYPES,
      formLists_: null,
      newType: 'input',
    };
  },
  components: {
    RightTemplate,
    InputNormal, 
    TextareaNormal,
    SwitchNormal,
    DropdownNormal,
    SubmitButton,
    ColorNormal,
    SliderNormal,
  },
  computed: {
    ...mapState({
      lists: (state) => {
        let lists_ = _.cloneDeep(state.components.currentComponentData.lists);
        let commonAttr = state.components.currentComponentData.commonAttr;
        if(commonAttr.isDisplayRelate){
          let index = _.random(0, 1);
          _.pullAllBy(lists_, [{'optionIndex': index}], 'optionIndex');
        }else{
          let arr = [];
          _.forEach(lists_, (item) => {
            if(item.relateId){
              arr.push(item);
            }
          })
          _.pullAll(lists_, arr);
        }
        return lists_;
      }
    }),
  },
  methods: {
    ...mapActions({
    }),
    onAddItem(){
      let item = _.cloneDeep(ADD_FORM_LISTS[this.newType]);
      this.addComponentItem(item);
    },
    onAddOptionItem(item, index){
      let optionItem = _.cloneDeep(ADD_FORM_LISTS[item.type].options[0])
      item.options.push(optionItem);
      this.updateComponentItem({index, item});
    },
    onUpdateOptionItem(index){
      let item = this.lists[index];
      this.updateComponentItem({index, item});
    },
    onDeleteOptionItem(e, index, qIndex){
      e.stopPropagation();
      e.preventDefault();

      let item = this.lists[index];
      item.options.splice(qIndex, 1);
      this.updateComponentItem({index, item});
    },
  },
};
</script>
